<template>
  <el-dialog
    v-model="showDialog"
    :title="title"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    destroy-on-close
    align-center
  >
    <el-form :model="hbForm" label-width="120px" ref="formRef">
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item
            label="外壳类型"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择外壳类型' }"
            prop="type"
          >
            <el-select
              v-model="type"
              placeholder="请选择外壳类型"
              @change="selectType"
              ref="selectRef"
            >
              <el-option
                v-for="item in types"
                :key="item"
                :label="item.metaName.replace('元数据', '')"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item
            label="外壳名称"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写外壳名称' }"
            prop="name"
          >
            <el-input v-model="hbForm.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item label="目录值" prop="dir">
            <el-input v-model="hbForm.dir" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8">
          <label style="width: 120px" class="el-form-item__label">数字化加工文件</label>
        </el-col>
        <el-col :span="8">
          <label style="width: 120px" class="el-form-item__label">元数据信息</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">是否必备</label>
        </el-col>
      </el-row>
      <el-row justify="start" v-for="item in list" :key="item">
        <el-col :span="8" :offset="8">
          <label style="width: 140px" class="el-form-item__label">{{ item.fieldDesc }}</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-select
              v-model="hbForm.must[item.name]"
              style="width: 200px"
              placeholder="请选择是否必备"
            >
              <el-option :value="true" label="必备" />
              <el-option :value="false" label="不必备" />
            </el-select>
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <label style="width: 120px" class="el-form-item__label">完整度计算规则</label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">基本信息占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.baseRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">数字化加工占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.processRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">审核占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.examineRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance } from 'element-plus'
import * as houseBookApi from '@/api/house/book'
import * as metaApi from '@/api/meta'

const title = ref('新建图书外壳')
const showDialog = ref(false)

const formRef = ref<FormInstance>()

const types = ref([])
const type = ref()

const hbForm = ref({
  baseRatio: 30,
  processRatio: 30,
  examineRatio: 40,
  must: {}
})

const openDialog = () => {
  title.value = '新建外壳'
  showDialog.value = true
}
const closeDialog = () => {
  list.value = []
  hbForm.value = {}
  showDialog.value = false
}
const updateDialog = async (id) => {
  title.value = '修改外壳'
  hbForm.value = await houseBookApi.one(id)
  types.value.forEach((res) => {
    if (res.id == hbForm.value.type) {
      type.value = res.id
    }
  })
  let res = await metaApi.selectField(fieldParams, type.value)
  list.value = res
  showDialog.value = true
}
const saveForm = () => {
  formRef.value.validate(async (valid) => {
    console.log(valid)
    if (valid) {
      if (type.value === 42) {
        // 检查是否存在 true 的值
        const hasTrueValue = Object.values(hbForm.value.must).some((value) => value === true)
        if (!hasTrueValue) {
          ElMessage.error('请至少选择一个元数据信息必备项')
          return
        }
      }
      const baseRatio = Number(hbForm.value.baseRatio)
      const processRatio = Number(hbForm.value.processRatio)
      const examineRatio = Number(hbForm.value.examineRatio)
      if (baseRatio + processRatio + examineRatio != 100) {
        ElMessage.error('请检查完整度计算规则占比之和是否为100')
        return
      }
      console.log(hbForm.value)
      houseBookApi.save(hbForm.value).then((res) => {
        showDialog.value = false
        getList()
      })
    }
  })
}

const getList: any = inject('getList')

const params = reactive({
  pageNo: 1,
  pageSize: 50,
  shelled: true
})

const getType = async () => {
  let res = await metaApi.page(params)
  types.value = res.list
  console.log(types.value)
}
const fieldParams = reactive({
  pageNo: 1,
  pageSize: 500,
  fieldDesc: '',
  shelled: true,
  createTime: []
})

const list = ref([])
const selectRef = ref<any>()
const selectType = async (value) => {
  console.log(value)
  hbForm.value.type = value
  //hbForm.value.typeName = value.metaName.replace('元数据', '')
  types.value.forEach((res) => {
    if (value == res.id) {
      hbForm.value.typeName = res.metaName.replace('元数据', '')
    }
  })
  let res = await metaApi.selectField(fieldParams, value)
  // let fileCount = {}
  // res.forEach((data) => {
  //   fileCount[data.name] = 0
  // })
  // hbForm.value.fileCountList = fileCount
  list.value = res
}

defineExpose({
  openDialog,
  updateDialog
})
onMounted(() => {
  getType()
})
</script>
<style>
.file-count {
  width: 120px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
